<template>
  <div class="contaiter">
    <el-form
      ref="internshipDesire"
      :model="internshipDesire"
      :rules="rules"
      label-position="left"
      label-width="150px"
    >
      <el-form-item label="期望职位" required prop="jobName">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望职位</span><br />
          <span class="en-label">Position Applied</span>
        </span>
        <el-input
          v-model="internshipDesire.jobName"
          placeholder="请输入期望职位,如：销售经理"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="期望行业" required prop="expectedIndustry">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望行业</span><br />
          <span class="en-label">Industry Preferences</span>
        </span>
        <el-cascader
          v-model="internshipDesire.expectedIndustry[0]"
          style="width: 50%"
          :options="areaDict"
          :show-all-levels="false"
          @change="businessAreaChange"
          placeholder="请选择期望行业，如：互联网/电子商务"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="期望城市" required prop="targetCity">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望城市</span><br />
          <span class="en-label">Target City</span>
        </span>
        <el-cascader
          v-model="internshipDesire.targetCity"
          style="width: 50%"
          :options="provinceAndCityData"
          :show-all-levels="false"
          @change="handleCityChange"
          placeholder="请选择期望城市"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="薪资要求" prop="highestSalary">
        <span slot="label" class="left-label">
          <span calss="cn-label">薪资要求</span><br />
          <span class="en-label">Target Salary</span>
        </span>
        <el-input
          placeholder="最低"
          type="number"
          maxlength="4"
          oninput="if(value.length>4)value=value.slice(0,4)"
          style="width: 220px"
          v-model="internshipDesire.lowestSalary"
        >
        </el-input>
        —
        <el-input
          placeholder="最高"
          type="number"
          style="width: 220px"
          maxlength="4"
          oninput="if(value.length>4)value=value.slice(0,4)"
          v-model="internshipDesire.highestSalary"
        >
        </el-input>
        <div class="right-label">
          <span class="cn">元/天</span><br />
          <span class="en">Yuan per day</span>
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm('internshipDesire')"
          >确定</el-button
        >
        <el-popconfirm
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
          v-if="showDel"
        >
          <i class="delete-icon" slot="reference"></i>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  getAreaDict,
  getProvinceAndCityDataLabel,
  getProvinceAndCityDataValue,
} from "@/utils/frontDataDict.js";
export default {
  props: {},
  data() {
    var highestSalaryValidator = (rule, value, callback) => {
      if (this.internshipDesire.lowestSalary == "") {
        callback(new Error("请输入最低薪资"));
      }
      if (value === "") {
        callback(new Error("请输入最高薪资"));
      } else if (
        parseInt(value) < parseInt(this.internshipDesire.lowestSalary)
      ) {
        callback(new Error("最高薪资不能低于最低薪资!"));
      } else {
        callback();
      }
    };
    var expectedIndustryValidator = (rule, value, callback) => {
      if (value[0] == "") {
        callback(new Error("请选择期望行业"));
      } else {
        callback();
      }
    };
    return {
      provinceAndCityData,
      areaDict: [],
      internshipDesire: {
        //实习意向
        jobName: "", // 期望职位
        expectedIndustry: ["", "", ""], //期望行业
        targetCity: "", //工作城市
        lowestSalary: "", //最低薪资
        highestSalary: "", //最高薪资
      },
      rules: {
        jobName: [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        expectedIndustry: [
          { validator: expectedIndustryValidator, trigger: "change" },
        ],
        targetCity: [
          { required: true, message: "请选择工作城市", trigger: "change" },
        ],
        lowestSalary: [
          { required: true, message: "请输入最低薪资", trigger: "blur" },
        ],
        highestSalary: [{ validator: highestSalaryValidator, trigger: "blur" }],
      },
      index: null,
      showDel: false,
    };
  },
  methods: {
    businessAreaChange(e) {
      console.log(e);
    },
    handleCityChange(e) {
      console.log(e);
    },
    cancel() {
      this.internshipDesire = {
        jobName: "", // 期望职位
        expectedIndustry: ["", "", ""], //期望行业
        targetCity: "", //工作城市
        lowestSalary: "", //最低薪资
        highestSalary: "", //最高薪资
      };
      this.showDel = false;
      this.index = null;
      this.$parent.$parent.$parent.closeFun("internshipDesire");
      this.$nextTick(() => {
        this.$refs["internshipDesire"].clearValidate();
      });
    },
    deleteConfirm() {
      this.$parent.$parent.$parent.deleteFun("internshipDesire", this.index);
      this.cancel();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.internshipDesire));
          data.targetCity = getProvinceAndCityDataLabel(data.targetCity);
          if (Array.isArray(data.expectedIndustry) && data.expectedIndustry.length === 2){
            data.expectedIndustry[0] = data.expectedIndustry[0][1];
          }
          this.$parent.$parent.$parent.upDate(
            "internshipDesire",
            data,
            this.index
          );
          this.cancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data));
      data.targetCity = getProvinceAndCityDataValue(data.targetCity);
      this.internshipDesire = data;
      this.index = index;
      this.showDel = true;
    },
  },
  created() {},
  mounted() {
    this.areaDict = getAreaDict();
  },
};
</script>

<style lang="less" scoped>
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
/deep/ .right-label {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 40px;
  overflow: hidden;
  vertical-align: middle;
  .cn {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 10px;
  }
  .en {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
}
</style>
